<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>

<body>
<div id="app">
    <el-row :gutter="20">
        <div id="employeeApp">
            <div v-for="employee in employees_data">
                <el-col :xs="12" :sm="12" :md="8">
                    <el-card class="box-card" style="margin-top:10px;">
                        <div style="text-align:center;">
                            <div>
                                <img :src="employee.imgUrl" style="width:100px;height:140px;"/>
                            </div>
                            <div>
                                {{employee.name }}
                            </div>

                            <input type="radio" v-model="picked[employee.id]" :name="employee.id" value="0">好评
                            <input type="radio" v-model="picked[employee.id]" :name="employee.id" value="1">差评

                        </div>
                    </el-card>
                </el-col>
            </div>
        </div>


        <el-col :span="24">
            <div class="block" style="text-align:center;margin-top:10px;">
                <el-pagination
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="8"
                        :total="all_num">
                </el-pagination>
            </div>
        </el-col>

        <el-col :span="24">
            <div style="text-align:center;margin-top:10px;">
                <el-button type="primary" size="large" @click="show">提交</el-button>
                <el-button size="large" @click="cancel">取消</el-button>
            </div>
        </el-col>

    </el-row>
    <el-dialog v-model="visible" title="输入信息" size="large">
        <p>完善信息</p>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="手机号码">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="顾客姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即提交</el-button>
                <el-button @click="submit_cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="visible_success" title="提示"  size="large">
        <p>{{ return_message }}</p>
    </el-dialog>
</div>

</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            employees_data: [],
            all_num:null,
            picked:{},
            visible:false,
            form:{
                phone:'',
                name:''
            },
            visible_success:false,
            return_message:''
        },
        methods:{
            handleCurrentChange:function (val) {
                //console.log(val);
                $.get('/index/getEmployees?page='+val,function(data){
                    var employees=JSON.parse(data);
                    //console.log(employees.data);
                    app.employees_data=employees.data;
                });
            },
            show:function () {
                //console.log(this.picked);
                app.visible=true;
            },
            cancel:function () {
                window.location.reload();
            },
            onSubmit:function () {
                console.log(app.form);
                console.log(this.picked);
                var p=JSON.stringify(this.picked);
                console.log(p);
                $.post('/index/getData',{'name':app.form.name,'phone':app.form.phone,'pick':p},function(data){
                    //console.log(data);
                    app.return_message=data;
                });
                app.visible=false;
                app.visible_success=true;

            },
            submit_cancel:function(){
                app.form.phone='';
                app.form.name='';
                app.visible=false;
            }

        },
        beforeCreate:function() {
            //console.log('123');
            $.get('/index/getEmployees?page=1',function(data){
                var employees=JSON.parse(data);
                //console.log(employees.data);
                app.employees_data=employees.data;
            });

            $.get('/index/getAllNum',function(data){
                //console.log(data);
                app.all_num=parseInt(data);
            });
        }
    });
    //new Vue().$mount('#app');

</script>
</html>